
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>数据统计>销售概况</div>
          <div class="hei10"></div>

        <div class="sales-situation" v-loading="loading">
          <div class="title">销售概况</div>
          <div class="btn-box">
            <el-button :type="form.day ? 'danger' : ''" @click="timechange('day')">今天</el-button>
            <el-button :type="form.yesterday ? 'danger' : ''" @click="timechange('yesterday')">昨天</el-button>
            <el-button :type="form.week ? 'danger' : ''" @click="timechange('week')">最近一周</el-button>
            <el-button :type="form.month ? 'danger' : ''" @click="timechange('month')">最近30天</el-button>
            <el-date-picker
              style="width: 400px;margin-left: 10px;"
              v-model="form.time"
              @change="timechange"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="con con-table" :class="head_num <= 7 ? 'flex-table' : ''">
          	<div class="llist">
          		<div class="th">基础产品</div>
          		<div class="th t-total">合计</div>
          		<div class="th" v-for="item in list.head" :key="item.order_page_id">{{item.title}}</div>
          	</div>
            <div class="llist">
            	<div class="td">合计</div>
              <div class="td t-total">{{list.total}}</div>
            	<div class="td" v-for="item in list.head" :key="item.order_page_id">{{item.orders_amount}}</div>
            </div>
          	<div class="llist" v-for="item in list.rows" :key="item.order_page_id">
          		<div class="td">{{item.name}}</div>
          		<div class="td t-total">{{item.orders_all_amount}}</div>
          		<div class="td" v-for="items in list.head" :key="items.order_page_id">{{item[`${items.order_page_id}_amount`]}}</div>
          	</div>
          </div>
          <div class="fenye">
            <el-pagination
              background
              layout="total,prev, pager, next"
              :current-page="page"
              @current-change="fanye"
              :page-size="page_size"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
  import foot from "@/components/foot.vue"
  import moment from 'moment'
	export default{
		components: {
			left: left,
			top: top,
      foot: foot
		},
		name : "all_report",
		data(){
			return {
        loading: false,
        form: {
          day: 'day',
          yesterday: '',
          week: '',
          month: '',
          time: '',
          start_time: '',
          end_time: ''
        },
        list: {
          head: [],
          rows: [],
          total: ''
        },
        row_end: 1000000, //一行显示几个
        head_num: 0,
        total: 0,
        page: 1,
        page_size: 20,
			}
		},
		created() {
      this.loading = true

      this.form.end_time = moment()
      .format("YYYY-MM-DD");
      this.form.start_time = moment()
      .format("YYYY-MM-DD");
      this.getData()
		},
		mounted(){

		},
		methods: {
      //选择时间
      timechange: function(val) {
        this.form.day = "";
        this.form.yesterday = "";
        this.form.week = "";
        this.form.month = "";
        this.form.time = "";
        switch (val){
          case 'day':
            this.form.day = "day";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .format("YYYY-MM-DD");
            break;
          case 'yesterday':
            this.form.yesterday = "yesterday";
            this.form.end_time = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(1, "days")
            .format("YYYY-MM-DD");
            break;
          case 'week':
            this.form.week = "week";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(7, "days")
            .format("YYYY-MM-DD");
            break;
          case 'month':
            this.form.month = "month";
            this.form.end_time = moment()
            .format("YYYY-MM-DD");
            this.form.start_time = moment()
            .subtract(30, "days")
            .format("YYYY-MM-DD");
            break;
          default:
            this.form.time = val;
            this.form.end_time = val[1];
            this.form.start_time = val[0];
            break;
        }
        this.loading = true
        this.getData()
      },
      //翻页
      fanye: function(val) {
        this.page = val;
        this.loading = true;
        this.getData();
      },
      getData: function () {
        var url = `/api/plan-market/data/shops?start_date=${this.form.start_time}&end_date=${this.form.end_time}&row_end=${this.row_end}&page=${this.page}&page_size=${this.page_size}`
        axios.get(url).then(response => {
          if(response.data.msg.code == 0){
            this.list.head = response.data.data.head_row
            this.list.rows = response.data.data.rows.data
            this.list.total = response.data.data.orders_total
            this.head_num = response.data.data.head_row.length
            this.total = response.data.data.rows.total
            this.loading = false
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
  .index {

    .btn-box{
      display: flex;padding: 22px 20px 25px 20px;align-items: center;justify-content: flex-end;
      .search{
         margin-right: 180px;
         .el-button--danger{
          padding: 9px 20px!important;
          border-radius: 4px;
        }
      }
      .el-input {
        line-height: 32px;
        width: 170px;
      }
      .el-button--danger{
        padding: 9px 10px!important;
      }
      .el-button{
        padding: 9px 10px;
        line-height: 14px;
        border-radius: 0;
      }

      .el-date-editor .el-range__icon{
        height: 32px;
      }
    }
    .con{
      .llist{
        display: inline-flex;width: auto; text-align: center; color: #646464; line-height: 45px; border-top: 1px #D8D8D8 solid; border-bottom: 1px #D8D8D8 solid; margin-top: -1px;
        .th{width:130px;flex:initial;background: #EEEEEE; font-size: 14px;}
        .td{width:130px;flex:initial;font-size: 14px;
          .seebtn{color: #197CFF;cursor: pointer;}
        }
        .th:first-child,.td:first-child{border-left: 1px #D8D8D8 solid;}
        .th:last-child,.td:last-child{border-right:1px #D8D8D8 solid;}
        .t-total{background: #D9F0FF;width: 80px;flex: initial!important;}
        .tf{background: #F9F9F9;}
      }
    }
    .con-table{
      width: 1123px;overflow: auto;margin: 0 auto;
      :nth-of-type(1){background: #EEEEEE;}
      :nth-of-type(2){
        background: #D9F0FF;
        .td:first-child{background: #D9F0FF;}
        .td{line-height: 30px;}
      }
    }
    .flex-table{
      .llist{
        display: flex;width: 1123px;
        .th,.td{flex:1;}
      }
    }
    .fenye {
      text-align: right;
      margin: 20px 10px;
    }
  }
</style>
